﻿<!DOCTYPE html>
<html>
  <head>
    <title>复选框 Checkbox</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1440, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/____checkbox/styles.css" type="text/css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/____checkbox/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (Rectangle) -->
      <div id="u5284" class="ax_default _默认样式">
        <div id="u5284_div" class=""></div>
      </div>

      <!-- Unnamed (元件标题) -->

      <!-- 背景 (Dynamic Panel) -->
      <div id="u5286" class="ax_default" data-label="背景">
        <div id="u5286_state0" class="panel_state" data-label="State1" style="">
          <div id="u5286_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- 线条 (Dynamic Panel) -->
      <div id="u5287" class="ax_default" data-label="线条">
        <div id="u5287_state0" class="panel_state" data-label="State1" style="">
          <div id="u5287_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5288" class="ax_default _默认样式">
        <div id="u5288_div" class=""></div>
        <div id="u5288_text" class="text ">
          <p><span style="font-family:'FontAwesome Bold', 'FontAwesome Regular', 'FontAwesome';"></span><span style="font-family:'微软雅黑 Bold', '微软雅黑';"> 元件标题</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5289" class="ax_default _默认样式">
        <div id="u5289_div" class=""></div>
        <div id="u5289_text" class="text ">
          <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span><span style="font-family:'FontAwesome';font-weight:400;">作品首页</span></p>
        </div>
      </div>

      <!-- Unnamed (版权信息) -->

      <!-- Unnamed (Rectangle) -->
      <div id="u5291" class="ax_default _默认样式">
        <img id="u5291_img" class="img " src="images/___icons/u605.png"/>
        <div id="u5291_text" class="text ">
          <p><span>Copyright © </span><a id="u5292" class="link"><span>http://t.cn/EPh287q</span></a><span>, All Rights Reserved.</span></p><p><span>打造高保真原型，快人一步</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5293" class="ax_default" data-left="20" data-top="100" data-width="1100" data-height="90">

        <!-- Unnamed (Rectangle) -->
        <div id="u5294" class="ax_default _默认样式">
          <div id="u5294_div" class=""></div>
          <div id="u5294_text" class="text ">
            <p style="font-size:14px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑';font-weight:700;">使用说明</span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">主要用于一组可选项多项选择，或者单独用于标记切换某种状态。提供了动态及静态的元件示例，可根据需要选择使用。扩展阅读文章：</span><a id="u5295" class="link"><span style="font-family:'微软雅黑';font-weight:400;">专业交互干货！单选、复选、开关应该如何使用？</span></a></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u5296" class="ax_default _默认样式">
          <div id="u5296_div" class=""></div>
          <div id="u5296_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5297" class="ax_default _默认样式">
        <div id="u5297_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5298" class="ax_default _默认样式">
        <div id="u5298_div" class=""></div>
        <div id="u5298_text" class="text ">
          <p><span>静态复选框 </span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5299" class="ax_default" data-left="40" data-top="281" data-width="300" data-height="40">

        <!-- Unnamed (Group) -->
        <div id="u5300" class="ax_default" data-left="40" data-top="281" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u5301" class="ax_default _默认样式">
            <img id="u5301_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u5301_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 金斑蝶</span></p>
            </div>
          </div>
        </div>

        <!-- Unnamed (Group) -->
        <div id="u5302" class="ax_default" data-left="140" data-top="281" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u5303" class="ax_default _默认样式">
            <img id="u5303_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u5303_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 爪哇犀牛</span></p>
            </div>
          </div>
        </div>

        <!-- Unnamed (Group) -->
        <div id="u5304" class="ax_default" data-left="240" data-top="281" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u5305" class="ax_default _默认样式">
            <img id="u5305_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u5305_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 印度黑羚</span></p>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5306" class="ax_default _默认样式">
        <div id="u5306_div" class=""></div>
        <div id="u5306_text" class="text ">
          <p><span>竖排样式</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5307" class="ax_default" data-left="604" data-top="275" data-width="100" data-height="120">

        <!-- Unnamed (Group) -->
        <div id="u5308" class="ax_default" data-left="604" data-top="275" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u5309" class="ax_default _默认样式">
            <img id="u5309_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u5309_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 金斑蝶</span></p>
            </div>
          </div>
        </div>

        <!-- Unnamed (Group) -->
        <div id="u5310" class="ax_default" data-left="604" data-top="315" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u5311" class="ax_default _默认样式">
            <img id="u5311_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u5311_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 爪哇犀牛</span></p>
            </div>
          </div>
        </div>

        <!-- Unnamed (Group) -->
        <div id="u5312" class="ax_default" data-left="604" data-top="355" data-width="100" data-height="40">

          <!-- Unnamed (Rectangle) -->
          <div id="u5313" class="ax_default _默认样式">
            <img id="u5313_img" class="img " src="images/单选框_radio/u5244.png"/>
            <div id="u5313_text" class="text ">
              <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 印度黑羚</span></p>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5314" class="ax_default _默认样式">
        <div id="u5314_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5315" class="ax_default _默认样式">
        <div id="u5315_div" class=""></div>
        <div id="u5315_text" class="text ">
          <p><span>动态复选框 </span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5316" class="ax_default _默认样式">
        <div id="u5316_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5317" class="ax_default _默认样式">
        <div id="u5317_div" class=""></div>
        <div id="u5317_text" class="text ">
          <p><span>状态示例</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5318" class="ax_default" data-left="600" data-top="499" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u5319" class="ax_default _默认样式">
          <img id="u5319_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u5319_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 默认效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5320" class="ax_default" data-left="600" data-top="539" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u5321" class="ax_default _默认样式">
          <img id="u5321_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u5321_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 悬停效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5322" class="ax_default" data-left="600" data-top="579" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u5323" class="ax_default _默认样式">
          <img id="u5323_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u5323_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;"> 选中效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5324" class="ax_default" data-left="860" data-top="499" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u5325" class="ax_default _默认样式">
          <img id="u5325_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u5325_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 禁用效果</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u5326" class="ax_default" data-left="860" data-top="539" data-width="100" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u5327" class="ax_default _默认样式">
          <img id="u5327_img" class="img " src="images/单选框_radio/u5244.png"/>
          <div id="u5327_text" class="text ">
            <p style="font-size:18px;"><span style="font-family:'FontAwesome Regular', 'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;"> 选中禁用</span></p>
          </div>
        </div>
      </div>

      <!-- 复选框 (Repeater) -->
      <div id="u5328" class="ax_default" data-label="复选框">
        <script id="u5328_script" type="axure-repeater-template" data-label="复选框">

          <!-- text (Rectangle) -->
          <div id="u5329" class="ax_default _默认样式 u5329" data-label="text">
            <div id="u5329_div" class="u5329_div"></div>
            <div id="u5329_text" class="text u5329_text">
              <p><span>复选框</span></p>
            </div>
          </div>

          <!-- 复选图标 (Rectangle) -->
          <div id="u5330" class="ax_default _默认样式 u5330" data-label="复选图标" selectiongroup="复选框2">
            <img id="u5330_img" class="img u5330_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5330_text" class="text u5330_text">
              <p><span> </span></p>
            </div>
          </div>
        </script>
        <div id="u5328-1" class="preeval" style="width: 100px; height: 40px;">

          <!-- text (Rectangle) -->
          <div id="u5329-1" class="ax_default _默认样式 u5329" data-label="text" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <div id="u5329-1_div" class="u5329_div" style="width: 100px; height: 40px;visibility: inherit"></div>
            <div id="u5329-1_text" class="text u5329_text" style="position: absolute;left: 20px;top: 6px;width: 80px;visibility: inherit">
              <p><span>金斑蝶</span></p>
            </div>
          </div>

          <!-- 复选图标 (Rectangle) -->
          <div id="u5330-1" class="ax_default _默认样式 u5330" data-label="复选图标" selectiongroup="复选框2-1" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <img id="u5330-1_img" class="img u5330_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5330-1_text" class="text u5330_text" style="position: absolute;left: 0px;top: 6px;width: 100px;visibility: inherit">
              <p><span> </span></p>
            </div>
          </div>
        </div>
        <div id="u5328-2" class="preeval" style="width: 100px; height: 40px;">

          <!-- text (Rectangle) -->
          <div id="u5329-2" class="ax_default _默认样式 u5329" data-label="text" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <div id="u5329-2_div" class="u5329_div" style="width: 100px; height: 40px;visibility: inherit"></div>
            <div id="u5329-2_text" class="text u5329_text" style="position: absolute;left: 20px;top: 6px;width: 80px;visibility: inherit">
              <p><span>爪哇犀牛</span></p>
            </div>
          </div>

          <!-- 复选图标 (Rectangle) -->
          <div id="u5330-2" class="ax_default _默认样式 u5330" data-label="复选图标" selectiongroup="复选框2-2" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <img id="u5330-2_img" class="img u5330_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5330-2_text" class="text u5330_text" style="position: absolute;left: 0px;top: 6px;width: 100px;visibility: inherit">
              <p><span> </span></p>
            </div>
          </div>
        </div>
        <div id="u5328-3" class="preeval" style="width: 100px; height: 40px;">

          <!-- text (Rectangle) -->
          <div id="u5329-3" class="ax_default _默认样式 u5329" data-label="text" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <div id="u5329-3_div" class="u5329_div" style="width: 100px; height: 40px;visibility: inherit"></div>
            <div id="u5329-3_text" class="text u5329_text" style="position: absolute;left: 20px;top: 6px;width: 80px;visibility: inherit">
              <p><span>印度黑羚</span></p>
            </div>
          </div>

          <!-- 复选图标 (Rectangle) -->
          <div id="u5330-3" class="ax_default _默认样式 u5330" data-label="复选图标" selectiongroup="复选框2-3" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <img id="u5330-3_img" class="img u5330_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5330-3_text" class="text u5330_text" style="position: absolute;left: 0px;top: 6px;width: 100px;visibility: inherit">
              <p><span> </span></p>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5331" class="ax_default _默认样式">
        <div id="u5331_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u5332" class="ax_default _默认样式">
        <div id="u5332_div" class=""></div>
        <div id="u5332_text" class="text ">
          <p><span>独立使用</span></p>
        </div>
      </div>

      <!-- 独立复选框 (Group) -->
      <div id="u5333" class="ax_default" data-label="独立复选框" data-left="40" data-top="606" data-width="240" data-height="40">

        <!-- text (Rectangle) -->
        <div id="u5334" class="ax_default _默认样式" data-label="text">
          <div id="u5334_div" class=""></div>
          <div id="u5334_text" class="text ">
            <p><span style="color:#999999;">勾选同意《</span><a id="u5335" class="link"><span>用户服务协议</span></a><span style="color:#999999;">》</span></p>
          </div>
        </div>

        <!-- 复选图标 (Rectangle) -->
        <div id="u5336" class="ax_default _默认样式" data-label="复选图标">
          <img id="u5336_img" class="img " src="images/单选框_radio/单选图标_u5283.png"/>
          <div id="u5336_text" class="text ">
            <p><span> </span></p>
          </div>
        </div>
      </div>

      <!-- 复选框 (Repeater) -->
      <div id="u5337" class="ax_default" data-label="复选框">
        <script id="u5337_script" type="axure-repeater-template" data-label="复选框">

          <!-- text (Rectangle) -->
          <div id="u5338" class="ax_default _默认样式 u5338" data-label="text">
            <div id="u5338_div" class="u5338_div"></div>
            <div id="u5338_text" class="text u5338_text">
              <p><span>复选框</span></p>
            </div>
          </div>

          <!-- 复选图标 (Rectangle) -->
          <div id="u5339" class="ax_default _默认样式 u5339" data-label="复选图标" selectiongroup="复选框1">
            <img id="u5339_img" class="img u5339_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5339_text" class="text u5339_text">
              <p><span> </span></p>
            </div>
          </div>
        </script>
        <div id="u5337-1" class="preeval" style="width: 100px; height: 40px;">

          <!-- text (Rectangle) -->
          <div id="u5338-1" class="ax_default _默认样式 u5338" data-label="text" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <div id="u5338-1_div" class="u5338_div" style="width: 100px; height: 40px;visibility: inherit"></div>
            <div id="u5338-1_text" class="text u5338_text" style="position: absolute;left: 20px;top: 6px;width: 80px;visibility: inherit">
              <p><span>金斑蝶</span></p>
            </div>
          </div>

          <!-- 复选图标 (Rectangle) -->
          <div id="u5339-1" class="ax_default _默认样式 u5339" data-label="复选图标" selectiongroup="复选框1" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <img id="u5339-1_img" class="img u5339_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5339-1_text" class="text u5339_text" style="position: absolute;left: 0px;top: 6px;width: 100px;visibility: inherit">
              <p><span> </span></p>
            </div>
          </div>
        </div>
        <div id="u5337-2" class="preeval" style="width: 100px; height: 40px;">

          <!-- text (Rectangle) -->
          <div id="u5338-2" class="ax_default _默认样式 u5338" data-label="text" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <div id="u5338-2_div" class="u5338_div" style="width: 100px; height: 40px;visibility: inherit"></div>
            <div id="u5338-2_text" class="text u5338_text" style="position: absolute;left: 20px;top: 6px;width: 80px;visibility: inherit">
              <p><span>爪哇犀牛</span></p>
            </div>
          </div>

          <!-- 复选图标 (Rectangle) -->
          <div id="u5339-2" class="ax_default _默认样式 u5339" data-label="复选图标" selectiongroup="复选框1" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <img id="u5339-2_img" class="img u5339_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5339-2_text" class="text u5339_text" style="position: absolute;left: 0px;top: 6px;width: 100px;visibility: inherit">
              <p><span> </span></p>
            </div>
          </div>
        </div>
        <div id="u5337-3" class="preeval" style="width: 100px; height: 40px;">

          <!-- text (Rectangle) -->
          <div id="u5338-3" class="ax_default _默认样式 u5338" data-label="text" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <div id="u5338-3_div" class="u5338_div" style="width: 100px; height: 40px;visibility: inherit"></div>
            <div id="u5338-3_text" class="text u5338_text" style="position: absolute;left: 20px;top: 6px;width: 80px;visibility: inherit">
              <p><span>印度黑羚</span></p>
            </div>
          </div>

          <!-- 复选图标 (Rectangle) -->
          <div id="u5339-3" class="ax_default _默认样式 u5339" data-label="复选图标" selectiongroup="复选框1" style="width: 100px; height: 40px; left: 0px; top: 0px;visibility: inherit">
            <img id="u5339-3_img" class="img u5339_img" src="images/单选框_radio/u5244.png"/>
            <div id="u5339-3_text" class="text u5339_text" style="position: absolute;left: 0px;top: 6px;width: 100px;visibility: inherit">
              <p><span> </span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
